body {
    background-color: #ecf0f1;
    color: #2c3e50;
}

#mainDiv {
    width: 800px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: #d4d8d93d;
    min-height: 98%;
}

.bucketSpan {
    width: 100px;
    display: inline-block;
    text-align: center;
    margin: 20px;
    padding: 6px;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    background-color: #ecf0f1;
    cursor: pointer;
}

.bucketSpan:hover {
    background-color: #bdc3c7;
}

#categoriesDiv {
    margin-left: 36px;
    display: block;
    float: left;
    margin-top: 105px;
    width: 120px;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    background-color: #ecf0f1;
}

.categoryDiv {
    margin: 4px;
}

#scoresDiv {
    width: 490px;
    display: block;
    float: left;
    min-height: 550px;
}

.scoresTable {
    margin: 0 auto;
    font-size: 14px;
    border-collapse: collapse;
    margin-bottom: 5px;
}

#beggarTable {
    font-size: 16px;
    border-collapse: collapse;
    margin-bottom: 5px;
}

#defeatTable {
    font-size: 16px;
    border-collapse: collapse;
    margin-bottom: 5px;
}

.title {
    text-align: center;
    font-size: 17px;
}

th {
    padding: 2px;
}

td {
    padding: 2px;
    text-align: center;
}

form {
    margin: 5px;
    width: 140px;
    text-align: center;
    display: block;
    float: left;
    margin-top: 5px;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    background-color: #ecf0f1;
}

#nameInputForm {
    margin-top: 110px;
}

label {
    width: 138px;
    display: inline-block;
    text-align: right;
    margin-top: 5px;
    margin-bottom: 5px;
}

input {
    width: 125px;
    margin-bottom: 5px;
}

button {
    padding: 3px;
    margin-bottom: 5px;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #3498db;
}

.scoresLink {
    color: inherit;
}

.buttonLink {
    color: inherit;
}

a:hover,
a:focus {
    text-decoration: underline;
}

.buttonLink:hover,
.buttonLink:focus {
    text-decoration: none;
}

#nextPrevDiv {
    text-align: center;
    width: 500px;
}

img {
    width: 1em;
    height: 1em;
    margin-right: 2px;
    border-radius: 5px;
}

#headerImage {
    width: 800px;
    height: 150px;
    margin-right: 0px;
}

.skillCell {
    text-align: left;
}

#header {
    background-color: #bdc3c7;
    border-radius: 5px;
    height: 150px;
}

#sectionsDiv {
    height: 42px;
}

.sectionSpan {
    text-align: center;
    margin: 4px;
    padding: 6px;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    background-color: #ecf0f1;
    float: right;
    cursor: pointer;
}

.playNowSpan {
    text-align: center;
    margin: 4px;
    padding: 6px;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    background-color: #fadbd8;
    float: right;
    cursor: pointer;
}

.sectionSpan:hover {
    background-color: #bdc3c7;
}

.playNowSpan:hover {
    background-color: #f3a69e;
}

.button {
    text-align: center;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    background-color: #ecf0f1;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
}

.button:hover {
    background-color: #bdc3c7;
}

.spinner {
    width: 15px;
    height: 15px;
    border: 4px solid #ddd;
    border-radius: 50%;
    border-top-color: #2196F3; /* Blue color for the spinning part */
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-top: 5px;
    position: relative;
    top: 7px;
    left: 3px;
}

@keyframes spin {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

.newsContentDiv {
    width: 500px;
    left: 150px;
    position: relative;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px;
    background-color: #f5f7f8;
}

#newsNextPrevDiv {
    text-align: center;
    width: 500px;
    left: 150px;
    position: relative;
}

#footerDiv{
    width: 800px;
    position: absolute;
    bottom: -14px;
    height: 14px;
    font-size: 12px;
    text-align: center;
    background-color: #d4d8d96d;
}

.newsTitleDiv {
    text-align: center;
    width: 100%;
}

.newsTitle {
    font-size: 18px;
    font-weight: bold;
    margin: 2px;
}

.newsDate {
    font-size: 14px;
    margin: 2px;
}

.newsParagraph {
    margin: 10px;
}

.newsLink {
    color: #3498db;
}

#statusTable {
    margin: 0 auto;
    font-size: 14px;
    border-collapse: collapse;
    margin-bottom: 5px;
}

.green-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: green;
    border-radius: 50%;
}

.red-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
  }